<template>
  <div class="institutionManagement-container">
    <vab-query-form>
      <vab-query-form-left-panel :span="12">
        <el-button icon="el-icon-plus" type="primary" @click="handleEdit">
          新增
        </el-button>
      </vab-query-form-left-panel>
    </vab-query-form>

    <div class="table-list" id="table-list">
      <div class="left-tree">
        <el-card shadow="always" :body-style="{ padding: '8px' }">
          <el-tree
            class="filter-tree"
            :data="treeList"
            highlight-current
            :props="defaultProps"
            :expand-on-click-node="false"
            :check-on-click-node="true"
            @node-click="checktree"
            :check-strictly="true"
            :current-node-key="currentkey"
            node-key="id"
            default-expand-all
            ref="tree"
          >
            <!-- <span class="span-ellipsis" slot-scope="{ node }">
              <span :title="node.label">{{ node.label }}</span>
            </span> -->
            <span class="custom-tree-node" slot-scope="{ node, data }">
              <span class="tree-label">{{ node.label }}</span>
              <span class="tree-icon">
                <el-button
                  type="text"
                  icon="el-icon-edit-outline"
                  size="mini"
                  @click="() => append(data)"
                ></el-button>
                <el-button
                  type="text"
                  icon="el-icon-delete"
                  size="mini"
                  @click="() => handleDelete(node, data)"
                ></el-button>
              </span>
            </span>
          </el-tree>
        </el-card>
      </div>

      <div class="from-list">
        <el-descriptions
          title="机构管理"
          direction="vertical"
          :column="2"
          border
          id="descriptions"
        >
          <el-descriptions-item label="单位内码">
            {{ treerow.code }}
          </el-descriptions-item>
          <el-descriptions-item label="机构名称">
            {{ treerow.jigoumc }}
          </el-descriptions-item>
          <!-- <el-descriptions-item label="机构类别">
            {{ getJglb(treerow.jigouType) }}
          </el-descriptions-item> -->
          <el-descriptions-item label="上级机构">
            {{ treerow.fjigoumc || '一级机构' }}
          </el-descriptions-item>
          <el-descriptions-item label="创建人">
            {{ treerow.createName }}
          </el-descriptions-item>
          <el-descriptions-item label="创建时间">
            {{ treerow.createTime }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>
    <!-- <el-pagination
      background
      :current-page="listQuery.pageIndex"
      :page-size="listQuery.pageSize"
      :layout="layout"
      :total="total"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    ></el-pagination> -->
    <edit
      ref="edit"
      :jglblist="jglblist"
      :treeList="treeList"
      :currentkey="currentkey"
      @fetch-data="fetchData"
    ></edit>
  </div>
</template>

<script>
  import {
    doDelete,
    save,
    getJGLBList,
    getTree,
    getJGyonghu,
    doDeleteYonghu,
    getJigouByID,
  } from '@/api/institution'
  import Edit from './components/InstitutionManagementEdit'
  import tree from '@/components/SelectTree/index'
  export default {
    name: 'InstitutionManagement',
    components: { Edit, tree },
    data() {
      return {
        list: null,
        listLoading: true,
        layout: 'prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        listQuery: {
          treeId: 0,
        },
        usershow: false,
        jueseshow: false,
        keyword: '',
        treeList: [],
        defaultProps: {
          children: 'childList',
          label: 'jigoumc',
          value: 'id',
        },
        rules: {
          danweinm: [
            { required: true, trigger: 'blur', message: '请输入单位内码' },
          ],
          mingcheng: [
            { required: true, trigger: 'blur', message: '请输入机构名称' },
          ],
        },
        jglblist: [],
        shangjilist: [],
        currentkey: null,
        jueseData: [],
        yonghuData: [],
        JSheight: null,
        rowHeight: 55,
        treerow: {},
        activeName: 'first',
        authName: 'kf',
      }
    },
    watch: {
      keyword(val) {
        this.$refs.tree.filter(val)
      },
    },
    async created() {
      this.fetchData()
    },
    computed: {
      height() {
        return this.$baseTableHeight()
      },
    },
    mounted() {
      let height = document.getElementById('table-list').offsetHeight
      let height2 = document.getElementById('descriptions').offsetHeight
      this.JSheight = height - height2 - 40
    },
    methods: {
      handleClick() {},
      setSelectRows(val) {
        this.selectRows = val
      },
      handleEdit(row) {
        this.$refs['edit'].showEdit()
      },
      RoleEdit(row) {
        this.$refs['roleedit'].showEdit(row)
      },
      UserEdit(row) {
        this.$refs['useredit'].showEdit(row)
      },
      doDeleteJuese(data) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDeleteJuese({ id: data.row.id })
          this.$baseMessage(msg, 'success')
          this.jueseData.splice(data.$index, 1)
        })
      },
      doDeleteYonghu(data) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDeleteYonghu({ id: data.row.id })
          this.$baseMessage(msg, 'success')
          this.yonghuData.splice(data.$index, 1)
        })
      },
      handleDelete(node, data) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          const { msg } = await doDelete({ id: data.id })
          this.$baseMessage(msg, 'success')
          this.fetchData()
        })
      },
      handleSizeChange(val) {
        this.listQuery.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.listQuery.pageIndex = val
        this.fetchData()
      },
      queryData() {
        this.listQuery.pageIndex = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const treedata = await getTree(this.listQuery)
        // const JGLBdata = await getJGLBList({})

        // this.jglblist = JGLBdata.data
        this.treeList = treedata.data
        if (this.treeList.length > 0) {
          this.$set(this.treeList[0], this.currentkey, this.treeList[0].id)
          this.treerow = this.treeList[0]
        }
        this.listLoading = false
      },

      getJglb(id) {
        let index = id ? this.jglblist.findIndex((item) => item.id == id) : -1
        return id
          ? index == -1
            ? ''
            : this.jglblist[index].mingcheng
          : this.jglblist
      },
      checktree(e) {
        if (e.fid == 0) {
          this.currentkey = e.id
          this.$set(this.treeList[0], this.currentkey, e.id)
          this.treerow = e
        } else {
          getJigouByID({ id: e.fid }).then((res) => {
            this.currentkey = e.id
            this.$set(this.treeList[0], this.currentkey, e.id)
            this.treerow = e
            this.treerow.fjigoumc = res.data.jigoumc
            this.$forceUpdate()
          })
        }
      },
      append(data) {
        this.$refs['edit'].showEdit(data)
      },

      remove(node, data) {
        const parent = node.parent
        const children = parent.data.children || parent.data
        const index = children.findIndex((d) => d.id === data.id)
        children.splice(index, 1)
      },
      detailJS(e) {
        this.RoleEdit(e.row)
      },
      detailYH(e) {
        this.UserEdit(e.row)
      },
      setkfyh(scope) {
        this.authName = 'kf'
        this.$nextTick(() => {
          this.$refs['auth-dialog'].showEdit(scope.row)
        })
      },
      setzyyh(scope) {
        this.authName = 'zy'
        this.$nextTick(() => {
          this.$refs['auth-dialog'].showEdit(scope.row)
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .institutionManagement-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .table-list {
      flex: 1;
      height: auto;
      overflow: hidden;
      display: flex;

      // .role-title {
      //   height: 40px;
      //   line-height: 40px;
      //   font-size: 16px;
      //   display: flex;
      //   justify-content: space-between;
      //   font-weight: bold;
      //   background-color: #e9f3ff;
      //   padding: 0 10px;
      //   border-bottom: 1px solid #dedede;
      //   margin-top: 10px;
      // }
      ::v-deep {
        .el-tabs__nav-scroll {
          padding: 0 0.1rem;
          font-weight: bold;
          background-color: #e9f3ff;
        }

        .el-tabs__item {
          font-size: 0.16rem;
          font-weight: bold;
        }

        .el-tabs__active-bar {
          transform: translateX(1.05rem);
        }

        .el-tabs__header {
          margin: 0;
        }
      }

      .left-tree {
        width: 25%;
        margin-right: 0.2rem;
        flex: 1;
        overflow: hidden;

        .el-card {
          height: 100%;
          box-sizing: border-box;
          overflow: auto;
        }
      }

      .from-list {
        width: 80%;
        display: flex;
        box-shadow: 0 0.02rem 0.12rem 0 rgba(0, 0, 0, 0.1);
        height: fit-content;
        flex-direction: column;

        .form-title {
          height: 0.4rem;
          line-height: 0.4rem;
          padding-left: 0.2rem;
          font-size: 0.18rem;
          background-color: #e9f3ff;
          border-bottom: 0.01rem solid #f1f1f1;
        }

        .el-form {
          width: 100%;
          display: flex;
          flex-flow: row wrap;
          align-content: flex-start;

          .el-form-item {
            width: 45%;
            margin: 0.1rem auto;
          }

          .el-select--small {
            width: 100%;
          }
        }
      }
    }

    ::v-deep {
      .el-button {
        font-size: 0.14rem !important;
      }

      .el-descriptions__header {
        margin: 0;
        line-height: 0.4rem;
        padding-left: 0.1rem;
        background-color: #e9f3ff;
      }

      .el-descriptions--small {
        font-size: 0.14rem;
      }

      .plTableBox .el-table th {
        background-color: rgb(233, 243, 255);
      }

      .plTableBox .el-table .cell {
        line-height: 0.4rem;
        font-size: 0.14rem;
      }

      .plTableBox .el-table--small td,
      .plTableBox .el-table--small th {
        padding: 0.04rem 0 !important;
      }

      .custom-tree-node {
        flex: 1;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .tree-label {
          width: 70%;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
</style>
